<template>
	<div class="cart">
		<ul class="product">
			<li class="item" v-for="(item, index) in list" :key="item.id">
				<template v-if="item.count">
					<van-image class="img" :src="item.imgUrl +item.id+'.jpg'" round />
					<div class="detail">
						<h4>{{ item.title }}</h4>
						<div class="price">
							<span class="yen">&yen;</span>{{ item.yen }}
							<span class="origin">&yen;{{ item.origin }}</span>
						</div>
					</div>
					<span class="count">{{ item.count || 0}}</span>
					<van-stepper class="stepper" v-model="item.count" min="0" theme="round" button-size=".2rem" integer />
				</template>
			</li>
		</ul>
		<div class="check">
			<div class="icon">
				<van-badge :content="totle" :show-zero="false" class="img">
					<van-image src="http://www.dell-lee.com/imgs/vue3/basket.png" />
				</van-badge>
			</div>
			<div class="info">
				总计：<span class="price">&yen; {{ price }}</span>
			</div>
			<div class="btn">去结算</div>
		</div>
	</div>
</template>

<script>
import { ref, computed } from "vue";
import { useStore } from 'vuex';
import { useRoute } from 'vue-router'
export default {
	name: "Cart",
	setup () {
		const route = useRoute();
		const store = useStore();

		const shopId = route.params.id; // 店铺Id
		const cartList = store.state.cartList;

		// 总数
		const totle = computed(() => {
			const productList = cartList[shopId];
			let count = 0;
			if (productList) {
				for (let i in productList) {
					count += productList[i].count;
				}
			}
			return count;
		})

		// 总价
		const price = computed(() => {
			const productList = cartList[shopId];
			let count = 0;
			if (productList) {
				for (let i in productList) {
					count += (productList[i].count * productList[i].yen);
				}
			}
			return count.toFixed(2);
		})


		const list = computed(() => {
			return cartList[shopId] || [];
		})

		return {
			totle,
			price,
			cartList,
			shopId,
			list
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped>
.cart {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.check {
	display: flex;
	line-height: 0.5rem;
	height: 0.49rem;
	border-top: 0.01rem solid #f1f1f1;
	.icon {
		width: 0.84rem;
		.img {
			display: block;
			width: 0.28rem;
			height: 0.26rem;
			margin: 0.12rem auto;
		}
	}
	.info {
		flex: 1;
		color: #333;
		font-size: 0.12rem;
		.price {
			color: #ee0a24;
			font-size: 0.18rem;
		}
	}
	.btn {
		width: 0.98rem;
		background-color: #ee0a24;
		color: #fff;
		font-size: 0.14rem;
		text-align: center;
	}
}
.product {
	flex: 1;
	overflow-y: auto;
	background: #fff;
	border-top: 1px solid #ddd;
	.item {
		display: flex;
		position: relative;
		padding: 0.12rem 0;
		margin: 0 0.16rem;
		border-bottom: 1px solid #f1f1f1;
		.img {
			width: 0.46rem;
			height: 0.46rem;
			margin-right: 0.16rem;
		}
		.detail {
			h4 {
				line-height: 0.2rem;
				font-size: 0.14rem;
				color: #333;
				font-weight: bold;
			}
			.price {
				margin: 0.06rem 0 0;
				font-size: 0.14rem;
				line-height: 0.2rem;
				color: #e93b3b;
				.yen {
					font-size: 0.12rem;
				}
				.origin {
					line-height: 0.2rem;
					font-size: 0.12rem;
					color: #999;
					text-decoration: line-through;
				}
			}
		}
		.stepper {
			position: absolute;
			right: 0;
			bottom: 0.12rem;
			::v-deep .van-stepper__input {
				color: #fff;
			}
		}
	}
	.count {
		position: absolute;
		right: 0.34rem;
		bottom: 0.14rem;
		z-index: 1;
		color: #333;
		font-size: 0.14rem;
	}
}
</style>
